<template>
    <view class="container">
        <navView navTitle="未付款" backgroundColor="#008efe" titleColor="#fff" :isBack="true"></navView>
        <!-- 头部区域 -->
        <view class="header">
            <view class="select-row">
                <uni-datetime-picker class="date-picker" type="daterange" v-model="dateRange" @change="handleDateChange"
                    :clear-icon="false" />
            </view>
            <!-- 中间数字显示 -->
            <view class="count-box">
                <text class="price">￥</text>
                <text class="count">{{ totalCount }}</text>
            </view>
        </view>

        <!-- 内容区域 -->
        <view class="content">
            <view class="user-card" v-for="(contract, index) in userList" :key="index">
                <view class="title">
                    {{ contract.name }}
                    <uni-icons type="right" size="25rpx" color="#C3C3C3"></uni-icons>
                </view>
                <view class="company">合同编号：{{ contract.num }}</view>
                <view class="company">入账额：{{ contract.total_price }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        const now = new Date()
        const firstDay = new Date(now.getFullYear(), now.getMonth(), 1)
        const lastDay = new Date(now.getFullYear(), now.getMonth() + 1, 0)
        return {
            currentMonth: '一月份', // 当前月份
            currentYear: '2023年', // 当前年份
            totalCount: 15, // 总数
            userList: [],
            dateRange: [
                `${firstDay.getFullYear()}-${(firstDay.getMonth() + 1).toString().padStart(2, '0')}-01`,
                `${lastDay.getFullYear()}-${(lastDay.getMonth() + 1).toString().padStart(2, '0')}-${lastDay.getDate().toString().padStart(2, '0')}`
            ],
        };
    },
    onShow() {
        this.getStaffStatistics()
    },
    methods: {
        // 处理月份选择器变化
        handleMonthChange(e) {
            const selectedMonth = e.detail.value;
            this.currentMonth = selectedMonth;
        },
        // 处理年份选择器变化
        handleYearChange(e) {
            const selectedYear = e.detail.value;
            this.currentYear = selectedYear;
        },
        // 获取数据简报列表
        getStaffStatistics() {
            this.$request('/addons/qingdong/staff/getStaffStatistics', 'GET', {
                times: this.dateRange.join(',')
            }).then(res => {
                this.totalCount = res.data.nopaycontract.money
                this.userList = res.data.nopaycontract.list
            })
        }
    },
};
</script>

<style scoped lang="scss">
/* 通用样式 */
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;
}

/* 头部区域 */
.header {
    background-color: #008efe;
    color: #ffffff;
    padding: 20rpx 30rpx;
    position: relative;
    padding-bottom: 80rpx;
}

::v-deep .uni-stat-box {
    border-radius: 20rpx;
}

::v-deep .uni-select {
    border: 0;
    height: 28px;
}

.select-row {
    display: flex;
    justify-content: center;

    .uni-data-select {
        width: 200rpx;
        margin: 0 20rpx;
    }
}

.select-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.down-arrow {
    width: 20rpx;
    height: 20rpx;
    margin-left: 10rpx;
}

.count-box {
    text-align: center;
    margin-top: 20rpx;
    font-size: 60rpx;
    font-weight: bold;
    color: #ffffff;

    .price {
        font-weight: 400;
        font-size: 35rpx;
        color: #FFFFFF;
    }
}

/* 内容区域 */
.content {
    flex: 1;
    padding: 20rpx;
}

.user-card:first-child {
    margin-top: -60rpx;
    position: relative;
}

.user-card {
    background-color: #ffffff;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.title {
    font-weight: bold;
    font-size: 30rpx;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rpx solid #E9E9E9;
    padding: 30rpx 0;
    margin-bottom: 30rpx;
}

.company {
    font-size: 24rpx;
    margin-top: 10rpx;
    color: #666666;
}
</style>